<template>
    <view class="flex flex-row flex-row-center-start">
        <childNode  ref="parentNodeRefNode" :followTheme="props.followTheme"  v-if="!props.data['children']" :fieldNames="props.fieldNames" :data="props.data"></childNode>
        <parentNode ref="parentNodeRef" :followTheme="props.followTheme"  v-if="props.data['children']"  :fieldNames="props.fieldNames" :data="props.data"></parentNode>
        <TmIcon _class="pr-16" :color="nodeData['color']" :font-size="28" v-if="nodeData['icon']" :name="nodeData['icon']"></TmIcon>
        <TmText @click="textClick(nodeData)" :font-size="28" :label="nodeData.text"></TmText>
    </view>
</template>
<script lang="ts" setup>
import TmCheckbox from '../tm-checkbox/tm-checkbox.vue';
import TmIcon from "../tm-icon/tm-icon.vue";
import TmText from "../tm-text/tm-text.vue";
import childNode from "./child-node.vue"
import parentNode from "./parent-node.vue"
import {ref,getCurrentInstance, inject, computed, toRaw, watch, watchEffect,Ref} from "vue"
import { baseNodeData } from "./interface";
import { treeFlat } from './util';
const parentNodeRef = ref<InstanceType<typeof parentNode> | null>(null);
const parentNodeRefNode = ref<InstanceType<typeof childNode> | null>(null);
    
const {proxy} = getCurrentInstance();
const emits = defineEmits(['textClick'])
const props = defineProps({
	followTheme: {
		type: [Boolean,String],
		default: true
	},
    /**
     * 数据
    * @description 生成树结构的数据。结构必须要有id字段。当然可以通过field-names来映射，如果你的唯一标识字段不是Id的话。
    */
    data: {
        type: Object,
        default: () => {},
        required: true
    },
     /**
     * 数据结构字段的映射表。
     */
    fieldNames:{
        type:Object,
        default:()=>{
            return {
                id:'id',
                text:'text'
            }
        }
    },
})
//父级方法。
let parent = proxy.$parent
while (parent) {
    if(parent?.TreeParaentName=='tmTree'||!parent){
        break;
    }else{
        parent = parent?.$parent??undefined
    }
}


const color = parent?.$props.color??'primary';
const nodeData= computed(()=><baseNodeData>{
    icon:props.data['icon']??'',//节点图标。
    color:props.data['color']||color,//节点颜色主题
    disabled:props.data['disabled']??false,//节点是否禁用
    text:props.data[props.fieldNames.text],//节点标题
    id:props.data[props.fieldNames.id],//节点标识
})


function textClick(node:baseNodeData){
    //如果存在子级。
    if(!props.data['children']){
        parentNodeRefNode.value?.setStatus()
    }
    emits("textClick",node)
    
}


</script>